<template>
  <div class="bind-codeData-page">
    <group>
      <x-input @on-change="isValid()" :class="{'weui-cell_warn': errors.code }" title="邀请码" v-model="codeData.code" placeholder-align="right" placeholder="请输入邀请码">
      </x-input>
    </group>
    <div class="error-wrapper" v-if="Object.keys(errors).length">
      <div v-if="errors.code" class="weui-cell_warn">{{errors.code}}</div>
    </div>
    <span class="btn scrm-default-btn  verify-btn" @click="saveVerificationCode()">核销</span>
    <x-dialog v-model="this.$store.state.app.dialogShow" >
      <div class="dialog-message">
        {{ this.$store.state.app.dialogMessage }}
      </div>
      <span class="vux-close" @click="hideDialog">知道了</span>
    </x-dialog>
  </div>
</template>
<style lang="less">
  @import "../less/bind-poster.less";
  .verify-btn {
    width: 90%;
    max-width: 500px;
    margin: 30px auto;
  }
</style>
<script>
  // import { XInput, Group, XDialog } from 'vux'
  import XInput from 'vux/src/components/x-input'
  import Group from 'vux/src/components/group'
  import XDialog from 'vux/src/components/x-dialog'
  import Selector from 'vux/src/components/selector'
  import Divider from 'vux/src/components/divider'
  import {Checker, CheckerItem} from 'vux/src/components/checker'

  import { mapActions, mapState } from 'vuex'
  import { showDialog, hideDialog } from '../lib/dialog'
  import Q from 'q'

  export default {
    data () {
      return {
        codeData: {
          code: ''
        },
        isTeam: '0',
        errors: {},
        isHandled: false,
        redirect: false
      }
    },
    mounted () {
      // this.initVerificationButton()
      this.callJsApi('biz.navigation.setTitle', { title: '核销' })
    },

    components: {
      XInput,
      Group,
      XDialog,
      Selector,
      Divider,
      Checker,
      CheckerItem
    },
    watch: {
      isTeam (value) {
        if (value === '0' && typeof this.codeData.team_id !== 'undefined' && this.codeData.team_id) {
          delete this.codeData.team_id
        }
      }
    },
    computed: {
      ...mapState({
        loginUser: state => state.app.user
      })
    },
    methods: {
      hideDialog () {
        hideDialog()
        if (this.redirect === true) {
          this.$router.push({name: 'scan-code-config'})
        }
      },
      isValid () {
        if (this.isHandled === false) return true

        let isValid = true
        let errors = Object.assign({}, this.errors)
        if (/\d+/.test(this.codeData.code) === false) {
          errors.code = '必须填写邀请码'
          isValid = false
        } else if (errors.code) {
          isValid = true
          delete errors.code
        }
        this.errors = errors
        return isValid
      },
      saveVerificationCode (callback) {
        return Q.Promise((resolve) => {
          this.isHandled = true
          if (this.isValid() === true) {
            this.$vux.loading.show({text: '提交中...'})
            this.verificationCode(this.codeData).then((response) => {
              this.$vux.loading.hide()
              if (response.data.errcode === 0) {
                showDialog('验证成功!')
                resolve()
                // this.redirect = true
              } else {
                typeof callback === 'function' && callback()
                showDialog(response.data.errmsg)
                resolve()
              }
              setTimeout(() => { hideDialog() }, 4000)
            }).catch((err) => {
              typeof callback === 'function' && callback()
              showDialog('系统出错...请联系管理员')
              setTimeout(() => { hideDialog() }, 4000)
              console.log(err)
              resolve()
            })
          } else {
            resolve()
          }
        })
      },
      initVerificationButton () {
        let options = {
          textColor: '#0089cd',
          items: [
            {
              'id': 'verification', // 字符串
              'text': '核销'
            }
          ]
        }
        // let target = {path: 'edit-task', query: {type: 'add'}}
        // this.callJsApi('biz.navigation.setMenu', options)
        //   .then((data) => {
        //     if (data.id === 'verification') {
        //       this.saveVerificationCode().then(() => {
        //         this.initVerificationButton()
        //       })
        //     }
        //     // this.$router.push(target)
        //   })
      },
      ...mapActions({
        verificationCode: 'verificationCode'
      })
    }
  }
</script>
